<template>
  <div class="app-container">
    <el-form label-width="120px" :model="step" :rules="rules" ref="step">
      <!--返回上一步-->
      <div class="back-bar-box mb-30">
        <div class="btn-back" @click="$router.go(-1)"><i class="el-icon-back"></i> 返回</div>
        <div class="line"></div>
        <div class="name">{{$route.name}}</div>
      </div>
      <!--编辑表单-->
      <el-form-item label="步骤名" prop="name">
        <el-input v-model="step.name" style="width: 400px"/>
      </el-form-item>

      <el-form-item label="描述" prop="description">
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="step.description"
          style="width: 400px">
        </el-input>

      </el-form-item>

      <el-form-item label="排序" prop="sort">
        <el-input-number v-model="step.sort" :min="0"/>
      </el-form-item>

      <el-form-item>
        <el-button @click="update('step')" type="primary">保存</el-button>
        <el-button @click="$router.go(-1)">取消</el-button>
      </el-form-item>

    </el-form>

  </div>
</template>
<script>
  export default {
    data() {
      return {
        step: {},
        rules: {
          name: [
            {required: true, message: '请输入标题', trigger: 'blur'},
            {min: 2, max: 255, message: '长度在 2 到 255 个字符', trigger: 'blur'}
          ]

        }
      }
    },
    created() {
      let id = this.$route.params.id
      if (id) {
        this.getData(id)
      }
    },
    methods: {
      getData(id) {
        this.api({
          url: `/step/getStep/${id}`,
          method: 'get',
        }).then(data => {
          this.step = data
        })
      },
      update(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.step.pathId = this.$route.query.pid
            this.api({
              url: "/step/saveOrUpdateStep",
              method: "post",
              data: this.step
            }).then(() => {
              this.$router.go(-1)
              return this.$message({
                type: 'success',
                message: '编辑成功!'
              });
            })
          } else {
            return false;
          }
        });

      }
    }
  }
</script>
